<template>
	<el-container class="container">
		<el-header>
			<el-input placeholder="请输入" class="input" v-model="city">
				<template #prepend>城市名：</template>
			</el-input>
		</el-header>
		<el-main class="main">
			<div class="today">
				今天：
				<span>{{ todayData.condition ?? plc }} {{ todayData.temp ?? plc }}°</span>
				<span style="margin-left:20px">风力 {{ todayData.windlevel ?? plc }}</span>
				<span style="margin-left:100px">{{ todayData.date }}</span>
			</div>
			<div class="real">
				<span class="temp">{{ realtime.temp ?? plc }}°</span>
				<span class="realInfo">{{ realtime.tips ?? plc }}</span>
				<span class="realInfo" style="margin-left:20px">{{ realtime.windDir ?? plc }}</span>
				<span class="realInfo" style="margin-left:20px">{{ realtime.windLevel ?? plc }}级</span>
			</div>
			<div class="real">
				<span class="realInfo">空气质量：{{ quality ?? plc }}°</span>
				<span class="realInfo" style="margin-left:20px">湿度：{{ realtime.humidity ?? plc }}</span>
			</div>
			<div class="future">
				<div class="header">15日天气预报</div>
				<el-table :data="futureData" style="margin-top:30px">
					<el-table-column prop="predictDate" label="日期"></el-table-column>
					<el-table-column prop="tempDay" label="温度"></el-table-column>
					<el-table-column prop="conditionDay" label="天气"></el-table-column>
					<el-table-column prop="windDirDay" label="风向"></el-table-column>
				</el-table>
			</div>
		</el-main>
	</el-container>
</template>

<script setup>
import cities from '@/assets/ch09/mocities.json'
import { ref, watch, onMounted } from 'vue'
import { 
	queryWeatherForecast15, 
	queryRealtime, 
	queryAirQuality,
	queryWeatherForecast24 } from '@/api/moji/aliweather' 

const city = ref("大连市")
const todayData = ref({})
const plc = "暂无数据"
const realtime = ref({})
const quality = ref('')
const futureData = ref([])

function getCityIdByName(name) {
    const city = cities.find(city => city.name === name);
    return city ? city.id : "2"; 
}

const GetWeatherForecast = (cityId) => {
  queryWeatherForecast15({cityId: cityId}).then(response => {    
		futureData.value = response.data.forecast
  });
	queryRealtime({cityId}).then(response => {    
    realtime.value = response.data.condition
  });
	queryAirQuality({cityId: cityId}).then(response => {    
    quality.value = response.data.aqi.value
  });
	queryWeatherForecast24({cityId: cityId}).then(response => {    
    todayData.value = response.data.hourly[0]
  });
}

onMounted(() => {
	GetWeatherForecast(getCityIdByName(city.value))
})

watch(city, () => {
	GetWeatherForecast(getCityIdByName(city.value))
})
</script>

<style scoped>
.container {
	background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195));
}

.input {
	width: 300px;
	margin-top: 20px;
}

.today {
	font-size: 20px;
	color: white;
}

.temp {
	font-size: 79px;
	color: white;
}

.realInfo {
	color: white;
}

.future {
	margin-top: 40px;
}

.header {
	color: white;
	font-size: 27px;
}
</style>
